import React, { memo } from 'react';
import { Layout, Menu } from 'antd';
import { NavLink } from 'react-router-dom';

import './style.less';

import { routerMenus } from '../../router/config/config';
export default memo(function LeftMenu() {
  const { Sider } = Layout;

  return (
    <div className="left-menu">
      <Sider
        className="left-slider"
        breakpoint="lg"
        collapsedWidth="0"
        onBreakpoint={(broken) => {}}
        onCollapse={(collapsed, type) => {}}
      >
        <Menu theme="dark" mode="inline" defaultSelectedKeys={['0']}>
          <div className="logo">
            <span className="title">后台管理系统</span>
          </div>
          {routerMenus.map((item) => {
            return (
              <Menu.Item key={item.id} icon={item.icon}>
                <NavLink to={item.link}>{item.title}</NavLink>
              </Menu.Item>
            );
          })}
        </Menu>
        <div className="contact">
          <p>联系方式：</p>
          <p>qq：1808929222</p>
          <p>微信：l16620052542</p>
          <p>电话：16620052542</p>
          <p>邮箱：lishiyidegmail.com</p>
        </div>
      </Sider>
    </div>
  );
});
